<template>
  <div class="post-management">
    <div class="page-header">
      <h1>帖子管理</h1>
      <button @click="showAddPostModal = true" class="btn-primary">
        <i class="icon-add"></i>
        添加帖子
      </button>
    </div>

    <div class="content-layout">
      <!-- 左侧分类列表 -->
      <div class="category-sidebar">
        <div class="sidebar-header">
          <h2>分类管理</h2>
          <button @click="showAddCategoryModal = true" class="btn-add-category">
            <i class="icon-add"></i>
            添加分类
          </button>
        </div>
        <div class="category-list">
          <div 
            class="category-item"
            :class="{ 'active': selectedCategoryId === null }"
            @click="selectCategory(null)"
          >
            <span class="category-name">全部帖子</span>
            <span class="category-count">{{ totalPosts }}</span>
          </div>
          <div 
            v-for="category in categories" 
            :key="category.id"
            class="category-item"
            :class="{ 'active': selectedCategoryId === category.id }"
            @click="selectCategory(category.id)"
          >
            <span class="category-name">{{ category.name }}</span>
            <span class="category-count">{{ category.postCount || 0 }}</span>
            <div class="category-actions">
              <button @click.stop="editCategory(category)" class="btn-icon" title="编辑">
                <i class="icon-edit"></i>
                编辑
              </button>
              <button @click.stop="deleteCategory(category)" class="btn-icon" title="删除">
                <i class="icon-delete"></i>
                删除
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧帖子列表 -->
      <div class="post-content">
        <!-- 搜索和筛选区域 -->
        <div class="filter-section">
          <div class="search-box">
            <input 
              type="text" 
              placeholder="搜索帖子标题、内容..." 
              v-model="searchQuery"
              @input="handleSearch"
            />
            <i class="icon-search"></i>
          </div>
          <div class="filter-options">
            <select v-model="statusFilter" @change="filterPosts">
              <option value="">全部状态</option>
              <option value="published">已发布</option>
              <option value="draft">草稿</option>
              <option value="hidden">已隐藏</option>
            </select>
            <select v-model="sortFilter" @change="filterPosts">
              <option value="latest">最新发布</option>
              <option value="hot">最热</option>
              <option value="views">浏览最多</option>
            </select>
          </div>
        </div>

        <!-- 帖子列表表格 -->
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>标题</th>
                <th>作者</th>
                <th>分类</th>
                <th>浏览量</th>
                <th>评论数</th>
                <th>状态</th>
                <th>发布时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="post in filteredPosts" :key="post.id">
                <td>{{ post.id }}</td>
                <td>
                  <div class="post-title">
                    <span v-if="post.isPinned" class="badge-pinned">置顶</span>
                    <span v-if="post.isEssence" class="badge-essence">精华</span>
                    {{ post.title }}
                  </div>
                </td>
                <td>{{ post.authorName }}</td>
                <td>
                  <span class="category-badge">
                    {{ getCategoryName(post.categoryId) }}
                  </span>
                </td>
                <td>{{ post.viewCount || 0 }}</td>
                <td>{{ post.commentCount || 0 }}</td>
                <td>
                  <span :class="['status-badge', post.status]">
                    {{ getStatusText(post.status) }}
                  </span>
                </td>
                <td>{{ formatDate(post.createdAt) }}</td>
                <td class="action-buttons">
                  <button @click="viewPost(post)" class="btn-view" title="查看详情">
                    <i class="icon-view"></i>
                    查看
                  </button>
                  <button @click="editPost(post)" class="btn-edit" title="编辑">
                    <i class="icon-edit"></i>
                    编辑
                  </button>
                  <button 
                    v-if="!post.isPinned" 
                    @click="pinPost(post)" 
                    class="btn-pin" 
                    title="置顶"
                  >
                    <i class="icon-pin"></i>
                    置顶
                  </button>
                  <button 
                    v-else 
                    @click="unpinPost(post)" 
                    class="btn-unpin" 
                    title="取消置顶"
                  >
                    <i class="icon-unpin"></i>
                    取消置顶
                  </button>
                  <button 
                    v-if="!post.isEssence" 
                    @click="setEssence(post)" 
                    class="btn-essence" 
                    title="设为精华"
                  >
                    <i class="icon-star"></i>
                    精华
                  </button>
                  <button @click="deletePost(post)" class="btn-delete" title="删除">
                    <i class="icon-delete"></i>
                    删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页控件 -->
        <div class="pagination">
          <button 
            @click="prevPage" 
            :disabled="currentPage === 1"
            class="btn-page"
          >
            上一页
          </button>
          <span class="page-info">
            第 {{ currentPage }} 页，共 {{ totalPages }} 页
          </span>
          <button 
            @click="nextPage" 
            :disabled="currentPage === totalPages"
            class="btn-page"
          >
            下一页
          </button>
        </div>
      </div>
    </div>

    <!-- 添加/编辑分类模态框 -->
    <div v-if="showAddCategoryModal || showEditCategoryModal" class="modal-overlay">
      <div class="modal modal-small">
        <div class="modal-header">
          <h2>{{ showEditCategoryModal ? '编辑分类' : '添加分类' }}</h2>
          <button @click="closeCategoryModal" class="btn-close">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveCategory">
            <div class="form-group">
              <label for="categoryName">分类名称</label>
              <input 
                type="text" 
                id="categoryName" 
                v-model="categoryForm.name" 
                required
              />
            </div>
            <div class="form-group">
              <label for="categoryDescription">分类描述</label>
              <textarea 
                id="categoryDescription" 
                v-model="categoryForm.description" 
                rows="3"
              ></textarea>
            </div>
            <div class="form-actions">
              <button type="button" @click="closeCategoryModal" class="btn-cancel">
                取消
              </button>
              <button type="submit" class="btn-primary">
                {{ showEditCategoryModal ? '保存' : '添加' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 添加/编辑帖子模态框 -->
    <div v-if="showAddPostModal || showEditPostModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h2>{{ showEditPostModal ? '编辑帖子' : '添加帖子' }}</h2>
          <button @click="closePostModal" class="btn-close">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="savePost">
            <div class="form-group">
              <label for="postTitle">标题</label>
              <input 
                type="text" 
                id="postTitle" 
                v-model="postForm.title" 
                required
              />
            </div>
            <div class="form-group">
              <label for="postCategory">分类</label>
              <select id="postCategory" v-model="postForm.categoryId" required>
                <option value="">请选择分类</option>
                <option v-for="category in categories" :key="category.id" :value="category.id">
                  {{ category.name }}
                </option>
              </select>
            </div>
            <div class="form-group">
              <label for="postContent">内容</label>
              <textarea 
                id="postContent" 
                v-model="postForm.content" 
                rows="8"
                required
              ></textarea>
            </div>
            <div class="form-group">
              <label for="postStatus">状态</label>
              <select id="postStatus" v-model="postForm.status" required>
                <option value="published">已发布</option>
                <option value="draft">草稿</option>
                <option value="hidden">已隐藏</option>
              </select>
            </div>
            <div class="form-actions">
              <button type="button" @click="closePostModal" class="btn-cancel">
                取消
              </button>
              <button type="submit" class="btn-primary">
                {{ showEditPostModal ? '保存' : '添加' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 帖子详情模态框 -->
    <div v-if="showPostDetailModal" class="modal-overlay">
      <div class="modal">
        <div class="modal-header">
          <h2>帖子详情</h2>
          <button @click="showPostDetailModal = false" class="btn-close">&times;</button>
        </div>
        <div class="modal-body">
          <div class="post-detail">
            <div class="detail-item">
              <span class="label">ID:</span>
              <span class="value">{{ selectedPost.id }}</span>
            </div>
            <div class="detail-item">
              <span class="label">标题:</span>
              <span class="value">{{ selectedPost.title }}</span>
            </div>
            <div class="detail-item">
              <span class="label">作者:</span>
              <span class="value">{{ selectedPost.authorName }}</span>
            </div>
            <div class="detail-item">
              <span class="label">分类:</span>
              <span class="category-badge">
                {{ getCategoryName(selectedPost.categoryId) }}
              </span>
            </div>
            <div class="detail-item">
              <span class="label">内容:</span>
              <div class="value post-content-preview">{{ selectedPost.content }}</div>
            </div>
            <div class="detail-item">
              <span class="label">浏览量:</span>
              <span class="value">{{ selectedPost.viewCount || 0 }}</span>
            </div>
            <div class="detail-item">
              <span class="label">评论数:</span>
              <span class="value">{{ selectedPost.commentCount || 0 }}</span>
            </div>
            <div class="detail-item">
              <span class="label">状态:</span>
              <span :class="['status-badge', selectedPost.status]">
                {{ getStatusText(selectedPost.status) }}
              </span>
            </div>
            <div class="detail-item">
              <span class="label">发布时间:</span>
              <span class="value">{{ formatDate(selectedPost.createdAt) }}</span>
            </div>
          </div>
          <div class="modal-actions">
            <button @click="showPostDetailModal = false" class="btn-primary">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { forumApi, categoryApi } from '@/api/modules'

// 响应式数据
const posts = ref([])
const categories = ref([])
const selectedCategoryId = ref(null)
const searchQuery = ref('')
const statusFilter = ref('')
const sortFilter = ref('latest')
const currentPage = ref(1)
const pageSize = ref(20)
const totalPosts = ref(0)

// 模态框状态
const showAddCategoryModal = ref(false)
const showEditCategoryModal = ref(false)
const showAddPostModal = ref(false)
const showEditPostModal = ref(false)
const showPostDetailModal = ref(false)
const selectedPost = ref({})

// 分类表单
const categoryForm = ref({
  id: null,
  name: '',
  description: ''
})

// 帖子表单
const postForm = ref({
  id: null,
  title: '',
  content: '',
  categoryId: '',
  status: 'published'
})

// 计算属性
const filteredPosts = computed(() => {
  let result = posts.value

  // 分类过滤
  if (selectedCategoryId.value !== null) {
    result = result.filter(post => post.categoryId === selectedCategoryId.value)
  }

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(post => 
      post.title.toLowerCase().includes(query) || 
      post.content.toLowerCase().includes(query)
    )
  }

  // 状态过滤
  if (statusFilter.value) {
    result = result.filter(post => post.status === statusFilter.value)
  }

  return result
})

const totalPages = computed(() => {
  return Math.ceil(totalPosts.value / pageSize.value)
})

// 生命周期钩子
onMounted(() => {
  fetchCategories()
  fetchPosts()
})

// 方法
const fetchCategories = async () => {
  try {
    const params = {
      pageNo: 1,
      pageSize: 100 // 获取所有分类
    }
    const response = await categoryApi.getForumCategoryPage(params)
    console.log('分类API响应:', response) // 添加日志以便调试
    
    // 按照API文档示例处理返回数据
    if (response && response.code === 200 && response.data && response.data.list) {
      // 将API返回的数据转换为前端需要的格式
      const apiCategories = response.data.list.map(item => ({
        id: item.id,
        name: item.categoryName,
        description: item.description || '',
        postCount: item.postCount || 0
      }))
      
      categories.value = apiCategories
      console.log('处理后的分类数据:', categories.value)
    } else {
      console.warn('API响应数据结构不符合预期:', response)
      categories.value = getMockCategories()
    }
  } catch (error) {
    console.error('获取分类列表失败:', error)
    categories.value = getMockCategories()
  }
}

const fetchPosts = async () => {
  try {
    const params = {
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      categoryId: selectedCategoryId.value
    }
    const response = await forumApi.getPostPage(params)
    console.log('帖子API响应:', response) // 添加日志以便调试
    
    // 按照API文档示例处理返回数据
    if (response && response.code === 200 && response.data && response.data.list) {
      // 将API返回的数据转换为前端需要的格式
      const apiPosts = response.data.list.map(item => ({
        id: item.id,
        title: item.title,
        content: item.content || '',
        authorName: item.authorName || '未知作者',
        categoryId: item.categoryId,
        viewCount: item.viewCount || 0,
        commentCount: item.commentCount || 0,
        status: item.status || 'published',
        isPinned: item.isPinned || false,
        isEssence: item.isEssence || false,
        createdAt: item.createdAt || new Date().toISOString()
      }))
      
      posts.value = apiPosts
      totalPosts.value = response.data.total || 0
      console.log('处理后的帖子数据:', posts.value)
    } else {
      console.warn('API响应数据结构不符合预期:', response)
      posts.value = getMockPosts()
      totalPosts.value = posts.value.length
    }
  } catch (error) {
    console.error('获取帖子列表失败:', error)
    posts.value = getMockPosts()
    totalPosts.value = posts.value.length
  }
}

const getMockCategories = () => {
  return [
    { id: 1, name: '技术交流', description: '技术相关讨论', postCount: 15 },
    { id: 2, name: '生活分享', description: '生活日常分享', postCount: 8 },
    { id: 3, name: '问题求助', description: '遇到问题求助', postCount: 12 },
    { id: 4, name: '资源分享', description: '资源分享专区', postCount: 6 }
  ]
}

const getMockPosts = () => {
  return [
    {
      id: 1,
      title: 'Vue 3 最佳实践分享',
      content: '这是一篇关于 Vue 3 最佳实践的文章...',
      authorName: '张三',
      categoryId: 1,
      viewCount: 256,
      commentCount: 12,
      status: 'published',
      isPinned: true,
      isEssence: true,
      createdAt: '2023-11-20T10:30:00Z'
    },
    {
      id: 2,
      title: '如何提高代码质量',
      content: '分享一些提高代码质量的方法...',
      authorName: '李四',
      categoryId: 1,
      viewCount: 189,
      commentCount: 8,
      status: 'published',
      isPinned: false,
      isEssence: false,
      createdAt: '2023-11-19T14:20:00Z'
    },
    {
      id: 3,
      title: '周末去哪里玩',
      content: '推荐几个周末好去处...',
      authorName: '王五',
      categoryId: 2,
      viewCount: 145,
      commentCount: 15,
      status: 'published',
      isPinned: false,
      isEssence: false,
      createdAt: '2023-11-18T09:15:00Z'
    }
  ]
}

const selectCategory = (categoryId) => {
  selectedCategoryId.value = categoryId
  currentPage.value = 1
  fetchPosts()
}

const handleSearch = () => {
  currentPage.value = 1
}

const filterPosts = () => {
  currentPage.value = 1
  fetchPosts()
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    fetchPosts()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    fetchPosts()
  }
}

// 分类相关方法
const editCategory = (category) => {
  categoryForm.value = { ...category }
  showEditCategoryModal.value = true
}

const saveCategory = async () => {
  try {
    if (showEditCategoryModal.value) {
      // 编辑分类
      await categoryApi.updateCategory(categoryForm.value.id, {
        categoryName: categoryForm.value.name,
        description: categoryForm.value.description
      })
    } else {
      // 创建分类
      await categoryApi.createCategory({
        categoryName: categoryForm.value.name,
        description: categoryForm.value.description
      })
    }
    closeCategoryModal()
    fetchCategories()
  } catch (error) {
    console.error('保存分类失败:', error)
  }
}

const deleteCategory = async (category) => {
  if (confirm(`确定要删除分类 ${category.name} 吗？`)) {
    try {
      await categoryApi.deleteCategory(category.id)
      fetchCategories()
      if (selectedCategoryId.value === category.id) {
        selectedCategoryId.value = null
        fetchPosts()
      }
    } catch (error) {
      console.error('删除分类失败:', error)
    }
  }
}

const closeCategoryModal = () => {
  showAddCategoryModal.value = false
  showEditCategoryModal.value = false
  categoryForm.value = {
    id: null,
    name: '',
    description: ''
  }
}

// 帖子相关方法
const viewPost = (post) => {
  selectedPost.value = { ...post }
  showPostDetailModal.value = true
}

const editPost = (post) => {
  postForm.value = { ...post }
  showEditPostModal.value = true
}

const savePost = async () => {
  try {
    if (showEditPostModal.value) {
      await forumApi.updatePost(postForm.value.id, postForm.value)
    } else {
      await forumApi.createPost(postForm.value)
    }
    closePostModal()
    fetchPosts()
  } catch (error) {
    console.error('保存帖子失败:', error)
  }
}

const deletePost = async (post) => {
  if (confirm(`确定要删除帖子 ${post.title} 吗？此操作不可恢复！`)) {
    try {
      await forumApi.deletePost(post.id)
      fetchPosts()
    } catch (error) {
      console.error('删除帖子失败:', error)
    }
  }
}

const pinPost = async (post) => {
  try {
    await forumApi.pinPost(post.id)
    fetchPosts()
  } catch (error) {
    console.error('置顶帖子失败:', error)
  }
}

const unpinPost = async (post) => {
  try {
    await forumApi.unpinPost(post.id)
    fetchPosts()
  } catch (error) {
    console.error('取消置顶失败:', error)
  }
}

const setEssence = async (post) => {
  try {
    await forumApi.setEssence(post.id)
    fetchPosts()
  } catch (error) {
    console.error('设置精华失败:', error)
  }
}

const closePostModal = () => {
  showAddPostModal.value = false
  showEditPostModal.value = false
  postForm.value = {
    id: null,
    title: '',
    content: '',
    categoryId: '',
    status: 'published'
  }
}

const getCategoryName = (categoryId) => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : '未分类'
}

const getStatusText = (status) => {
  const statusMap = {
    published: '已发布',
    draft: '草稿',
    hidden: '已隐藏'
  }
  return statusMap[status] || status
}

const formatDate = (dateString) => {
  if (!dateString) return '从未'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}
</script>

<style scoped>
.post-management {
  padding: 24px;
  background-color: #f8fafc;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h1 {
  color: #1e293b;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #2563eb;
}

/* 内容布局 */
.content-layout {
  display: flex;
  gap: 24px;
}

/* 左侧分类栏 */
.category-sidebar {
  width: 280px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: fit-content;
  position: sticky;
  top: 24px;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-header h2 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
}

.btn-add-category {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: #eff6ff;
  color: #3b82f6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 12px;
  white-space: nowrap;
}

.btn-add-category:hover {
  background-color: #dbeafe;
}

.category-list {
  padding: 8px;
}

.category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.category-item:hover {
  background-color: #f9fafb;
}

.category-item.active {
  background-color: #eff6ff;
  color: #3b82f6;
}

.category-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.category-count {
  padding: 2px 8px;
  background-color: #f3f4f6;
  border-radius: 12px;
  font-size: 12px;
  color: #6b7280;
  margin-right: 8px;
}

.category-item.active .category-count {
  background-color: #dbeafe;
  color: #3b82f6;
}

.category-actions {
  display: none;
  gap: 4px;
}

.category-item:hover .category-actions {
  display: flex;
}

.btn-icon {
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 10px;
  white-space: nowrap;
}

.btn-icon:hover {
  background-color: #e5e7eb;
}

/* 右侧帖子内容 */
.post-content {
  flex: 1;
}

/* 搜索和筛选区域 */
.filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-box input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
}

.search-box .icon-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.filter-options {
  display: flex;
  gap: 12px;
}

.filter-options select {
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  min-width: 120px;
}

/* 表格样式 */
.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 24px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

th {
  background-color: #f9fafb;
  color: #374151;
  font-weight: 600;
  font-size: 14px;
}

td {
  color: #1f2937;
  font-size: 14px;
}

tr:hover {
  background-color: #f9fafb;
}

/* 帖子标题 */
.post-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-pinned {
  padding: 2px 6px;
  background-color: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.badge-essence {
  padding: 2px 6px;
  background-color: #fce7f3;
  color: #9f1239;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

/* 分类徽章 */
.category-badge {
  display: inline-block;
  padding: 4px 8px;
  background-color: #eff6ff;
  color: #1e40af;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 状态徽章 */
.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.published {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge.draft {
  background-color: #fef3c7;
  color: #92400e;
}

.status-badge.hidden {
  background-color: #f3f4f6;
  color: #6b7280;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-buttons button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 12px;
  white-space: nowrap;
}

.btn-view {
  background-color: #eff6ff;
  color: #1e40af;
}

.btn-view:hover {
  background-color: #dbeafe;
}

.btn-edit {
  background-color: #f0fdf4;
  color: #166534;
}

.btn-edit:hover {
  background-color: #dcfce7;
}

.btn-pin, .btn-unpin {
  background-color: #fef3c7;
  color: #92400e;
}

.btn-pin:hover, .btn-unpin:hover {
  background-color: #fde68a;
}

.btn-essence {
  background-color: #fce7f3;
  color: #9f1239;
}

.btn-essence:hover {
  background-color: #fbcfe8;
}

.btn-delete {
  background-color: #fef2f2;
  color: #991b1b;
}

.btn-delete:hover {
  background-color: #fee2e2;
}

/* 分页控件 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.btn-page {
  padding: 8px 16px;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-page:hover:not(:disabled) {
  background-color: #f9fafb;
}

.btn-page:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: #6b7280;
  font-size: 14px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.modal-small {
  max-width: 400px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  margin: 0;
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 24px;
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #374151;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.form-group textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-cancel {
  padding: 8px 16px;
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-cancel:hover {
  background-color: #f9fafb;
}

/* 帖子详情样式 */
.post-detail {
  margin-bottom: 24px;
}

.detail-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item .label {
  width: 100px;
  color: #6b7280;
  font-weight: 500;
}

.detail-item .value {
  flex: 1;
  color: #1f2937;
}

.post-content-preview {
  white-space: pre-wrap;
  word-break: break-word;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-layout {
    flex-direction: column;
  }
  
  .category-sidebar {
    width: 100%;
    position: static;
  }
}

@media (max-width: 768px) {
  .filter-section {
    flex-direction: column;
  }
  
  .search-box {
    max-width: none;
  }
  
  .filter-options {
    width: 100%;
  }
  
  .filter-options select {
    flex: 1;
  }
  
  .action-buttons {
    flex-wrap: wrap;
  }
  
  .table-container {
    overflow-x: auto;
  }
}
</style>
